<template>
  <div class="div_shopping_box">
    <div>
      <span>编辑</span>
      <span>购物车</span>
      <span></span>
    </div>

    <!-- 添加列表 -->
    <div>
      {{ this.$route.query.id }}
      55555
    </div>

    <div class="div_shopping_big">
      <img src="../assets/猜你喜欢.png" />
      <p>猜你喜欢</p>
    </div>

    <div class="div_lovelist_box">
      <ul>
        <li
          v-for="(item, index) in lovelist"
          :key="index"
          v-show="index <= 22 && index >= 19"
          @click="add_list_shopping(item)"
        >
          <img :src="item.pic" alt="" />
          <p>{{ item.name }}</p>
          <p>￥{{ item.pingtuanPrice }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import renqi from "../components/renqi/renqi";  //人气

export default {
  components: {
    // renqi
  },
  data() {
    return {
      lovelist: [],
      itemlist:{}
    };
  },
  mounted() {
    this.$APL.KANJIA().then((res) => {
      console.log(res.data.data);
      this.lovelist = res.data.data;
    });

    var id = this.$route.query.id; // 找id
    this.$APL.DETAILPOST(id).then((res) => {
      console.log(res);
      this.itemlist=res.data.data
    });
  },

  methods: {
    add_list_shopping(item) {
      this.$router.push({ path: "/shopping_list", query: { id: item.id } });
    },
  },
};
</script>

<style lang="scss">
.div_shopping_box {
  height: 90vh;
  width: 100%;
  overflow: scroll;
  div {
    &:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 1rem;
      border-bottom: 1px solid gainsboro;
      span {
        font-size: 0.3rem;
        &:nth-child(1) {
          color: red;
        }
      }
    }
  }
}
.div_shopping_big {
  img {
    width: 100%;
    text-align: center;
  }
  p {
    width: 100%;
    text-align: center;
  }
}
.div_lovelist_box {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li {
      width: 45%;
      img {
        width: 100%;
      }
      p {
        text-align: center;
        height: 0.5rem;
        &:nth-child(3) {
          color: red;
        }
      }
    }
  }
}
</style>